<template>
  <div>
    <!-- v-model:进行双向绑定,目前仅仅只能用在表单元素上 -->
    <!-- 语法:v-model="变量" -->
    用户名:
    <input v-model="username" type="text" /> <br />
    密码:
    <input v-model="password" type="text" />
    <select v-model="from">
      <option value="bj">北京</option>
      <option value="value">上海</option>
      <option value="wh">武汉</option>
    </select>
    <br />
    爱好:
    <!--
       v-model绑定的变量有两种情况
       非数组类型
       数组类型
     -->
    
    <input v-model="isChecked1" type="checkbox" value="smoke"> 抽烟
    <input v-model="isChecked2" type="checkbox" value="drink"> 喝酒
    <input v-model="isChecked3" type="checkbox" value="hotHead"> 烫头
    <!-- 单选按钮 -->
    性别:
    <input type="radio" v-model="gender" name="gender" value="male" id="" />男
    <input type="radio" v-model="gender" name="gender" value="female" id="" />女
  </div>
</template>

<script>
export default {
  name: "VuecliDemoApp",

  data() {
    return {
      username: "周就开心",
      password: "GGG",
      from: "",
      hobby: [],
      isChecked1: "",
      isChecked2: "",
      isChecked3: "",
      gender: "",
    };
  },

  mounted() {},

  methods: {},
};
</script>


<style lang="scss" scoped>
</style>